<template>
  <div class="user-admin-content">
    <div class="user-admin-content-right">
    <!--内容-->
      <router-view @component="routerView"></router-view>
    </div>
    <div class="user-admin-content-left">
      <router-link target="_blank" to="/publishPage">
        <div class="publish">
          <i class="iconfont icon-fabusekuai" style=" margin-right: 5px; font-size:20px"></i>
          {{$t('userAdmin.content.publishWork')}}
        </div>
      </router-link>
      <div class="nav-box">
        <router-link to="/userAdminPage/myWorks">
          <div v-if="this.component == 'myWorks'" class="nav works" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-wodezuopin" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myWork')}}
          </div>
          <div v-else class="nav works" @click="onclickNav" >
            <i class="iconfont icon-wodezuopin" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myWork')}}
          </div>
        </router-link>
        <router-link to="/userAdminPage/myArticle">
          <div v-if="this.component == 'myArticle'" class="nav article" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-bofang" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myArticle')}}
          </div>
          <div v-else class="nav article" @click="onclickNav">
            <i class="iconfont icon-bofang" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myArticle')}}
          </div>
        </router-link>
        <router-link to="/userAdminPage/myData">
          <div v-if="this.component == 'myData'" class="nav data" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-wodeshuju" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myData')}}
          </div>
          <div v-else class="nav data" @click="onclickNav">
            <i class="iconfont icon-wodeshuju" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myData')}}
          </div>
        </router-link>
        <router-link to="/userAdminPage/myCollection">
          <div v-if="this.component == 'myCollection'" class="nav coloection" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-wodebeibeiwodeshoucang" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myCollect')}}
          </div>
          <div v-else class="nav coloection" @click="onclickNav">
            <i class="iconfont icon-wodebeibeiwodeshoucang" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myCollect')}}
          </div>
        </router-link>
        <router-link to="/userAdminPage/myAttention">
          <div v-if="this.component == 'myAttention'" class="nav attention" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-wodeguanzhu" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myAttention')}}
          </div>
          <div v-else class="nav attention" @click="onclickNav">
            <i class="iconfont icon-wodeguanzhu" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.myAttention')}}
          </div>
        </router-link>
        <router-link to="/userAdminPage/myNews">
          <div v-if="this.component == 'myNews'" class="nav news" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-pinglunshu-" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.systemNews')}}
          </div>
          <div v-else class="nav news" @click="onclickNav" style="position: relative">
            <i class="iconfont icon-pinglunshu-" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.systemNews')}}
          </div>
        </router-link>
        <router-link to="/userAdminPage/myInfo">
          <div v-if="this.component == 'myInfo'" class="nav informent" @click="onclickNav" style="color: #ffcf3f">
            <i class="iconfont icon-xiugaixinxi" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.MyInfo')}}
          </div>
          <div v-else class="nav informent" @click="onclickNav">
            <i class="iconfont icon-xiugaixinxi" style="margin-right: 5px;"></i>
            {{$t('userAdmin.content.MyInfo')}}
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
        name: "UserAdminContent",
        data(){
            return{
                component:''
            }
        },
        methods:{
            routerView(val){
                this.component = val
            },
            onclickNav(){
                let timer = setInterval(function () {
                    let heig = parseInt(window.scrollY);
                    if (heig > 0) {
                        window.scrollTo(0, heig-50);
                    }else {
                        clearInterval(timer);
                    }
                }, 1)
            }
        }
    }
</script>

<style scoped>
  .user-admin-content{
    width: 1150px;
    margin: 0px auto;
    letter-spacing: 1px;
  }
  .user-admin-content-left{
    width: 200px;
    /*width: 300px;*/
    min-height: 550px;
    margin-top: 10px;
    position: fixed;
    top: 60px;
    z-index: 999;
  }
  .publish{
    height: 45px;
    background-color: cadetblue;
    border-radius: 3px;
    color: rgb(236, 236, 236);
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    border: solid 1px rgba(43, 120, 122, 0.82);
    transition: 0.2s;
  }
  .publish:hover{
    background-color: #00988a;
    color: rgb(255, 255, 255);
    box-shadow: 0 0 5px rgb(131, 131, 131);
  }
  .publish:active{
    background-color: #00897bcc;
  }
  .nav-box{
    min-height: 493px;
    margin-top: 10px;
    transition: 0.5s;
  }
  .nav{
    height: 50px;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    /*margin-bottom: 10px;*/
    /*background-color: rgba(84, 92, 100, 1);*/
    background-color: rgb(110, 110, 110);
    /*border-radius: 3px;*/
    border-bottom: 1px solid #545454;
  }
  .works{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .informent{
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .nav:hover{
    background-color: rgb(95, 95, 95);
    /*color: #ffcf3f;*/
  }
  .user-admin-content-right{
    width: 930px;
    /*width: 840px;*/
    min-height: 2200px;
    /* min-height: 550px; */
    margin-left: 220px;
    /*margin-left: 310px;*/
    margin-top: 15px;
    border-radius: 3px;
    position: relative;
    /*background-color: tomato;*/
  }
</style>
